import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import PateoTable from '../../../components/common/PateoTable';
import PateoSearchForm from '../../../components/common/PateoSearchForm';
import styles from '../../../components/common/PateoTable/TableList.less';
import Ellipsis from '../../../components/Ellipsis';
import SIMDetailModal from '@/components/simCard/simCardDetailModal';
import IPDADetailModal from '@/components/ipda/ipdaDetailModal';
import TboxDetailModal from '@/components/Tbox/tboxDetailModel';
import VehicleDetailModal from '@/components/vehicle/vinDetailModal';

const mapStateToProps = (state: any) => ({
  onePcMng: state.onePcMng,
  loading: state.loading.effects['onePcMng/getFetchPage'],
});
class OnePcMng extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      formValues: {},
      tboxDetailVisible: false,
      simDetailVisible: false,
      ipdaDetailVisible: false,
      vinDetailVisible: false,
      vinDetailModelData: {},
      tboxDetailModelData: {},
      simDetailModelData: {},
      ipdaDetailModelData: {},
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'onePcMng/getFetchPage',
      payload: { url: '/onepc/findbypage' },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'onePcMng/initData',
    });
  }

  handleDetailTbox = (deviceId: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'tbox/fetchtboxdetail',
      payload: deviceId,
      callback: (resp: any) => {
        if (resp.statusCode === '0') {
          this.setState({ tboxDetailModelData: resp.data, tboxDetailVisible: true });
        }
      },
    });
  };

  handleDetailSIM = (deviceId: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'simCard/findById',
      payload: deviceId,
      callback: (resp: any) => {
        if (resp.statusCode === '0') {
          this.setState({ simDetailModelData: resp.data, simDetailVisible: true });
        }
      },
    });
  };

  handleDetailIPDA = (deviceId: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'ipda/findById',
      payload: deviceId,
      callback: (resp: any) => {
        if (resp.statusCode === '0') {
          this.setState({ ipdaDetailModelData: resp.data, ipdaDetailVisible: true });
        }
      },
    });
  };

  handleDetailVIN = (vin: any) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'basedata/findVehicleProfile',
      payload: vin,
      callback: (resp: any) => {
        if (resp.statusCode === '0') {
          this.setState({ vinDetailModelData: resp.data, vinDetailVisible: true });
        }
      },
    });
  };

  render() {
    const {
      onePcMng: {
        pageData: { list, pagination },
      },
      loading,
    } = this.props;
    const { formValues } = this.state;
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        width: 60,
        render: (text: any, record: any, index: any) => {
          return index + 1 + (pagination.current - 1) * pagination.pageSize;
        },
      },
      {
        title: 'VIN',
        dataIndex: 'vin',
        render: (text: any) => {
          return (
            <a onClick={() => this.handleDetailVIN(text)}>
              <Ellipsis length={20} tooltip>
                {text}
              </Ellipsis>
            </a>
          );
        },
      },
      {
        title: 'PDSN',
        dataIndex: 'pdsn',
        render: (text: any) => {
          return (
            <a onClick={() => this.handleDetailIPDA(text)}>
              <Ellipsis length={20} tooltip>
                {text}
              </Ellipsis>
            </a>
          );
        },
      },
      {
        title: 'T-BOX编号',
        dataIndex: 'tbox',
        render: (text: any) => {
          return (
            <a onClick={() => this.handleDetailTbox(text)}>
              <Ellipsis length={20} tooltip>
                {text}
              </Ellipsis>
            </a>
          );
        },
      },
      {
        title: 'SIM卡号',
        dataIndex: 'sim',
        render: (text: any) => {
          return (
            <a onClick={() => this.handleDetailSIM(text)}>
              <Ellipsis length={20} tooltip>
                {text}
              </Ellipsis>
            </a>
          );
        },
      },
      {
        title: '状态',
        dataIndex: 'deviceStatus',
        render: (text: any) => {
          switch (String(text)) {
            case '1':
              return '激活成功';
            case '2':
              return '激活失败';
            case '3':
              return '解除失败';
            case '4':
              return '审核中';
            case '5':
              return '审核失败';
            case '6':
              return '激活RC中';
            case '7':
              return '激活RC失败';
            case '8':
              return '解除RC中';
            case '9':
              return '解除RC失败';
            default:
              return ' 出厂';
          }
        },
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      showTotal: () => (
        <span>共&nbsp;{pagination === undefined ? 0 : pagination.total}&nbsp;条</span>
      ),
    };
    const tableProps = {
      columns,
      dataSource: list,
      loading,
      rowKey: (record: any) => record.sid,
      pagination: paginationProps,
      scroll: { x: 'max-content' },
    };
    const searchItems = [
      {
        type: 'input',
        title: 'VIN',
        key: 'vin',
      },
    ];
    return (
      <div>
        <Card bordered={false}>
          <PateoSearchForm
            onRef={(val: any) => (this.searchForm = val)}
            searchItems={searchItems}
            fetchParams={{ type: 'onePcMng/getFetchPage', url: '/onepc/findbypage' }}
            saveFormValues={(val: any) =>
              this.setState({ formValues: Object.assign(formValues, val) })
            }
            handleFormReset={() => this.setState({ formValues: {} })}
          />
        </Card>
        <Card className={styles.standardTable}>
          <PateoTable
            extraHandle={true}
            tableProps={tableProps}
            fetchParams={{ type: 'onePcMng/getFetchPage', url: '/onepc/findbypage' }}
            formValues={formValues}
          />
          <VehicleDetailModal
            changeVisible={() => this.setState({ vinDetailVisible: false, vinDetailModelData: {} })}
            visible={this.state.vinDetailVisible}
            detailModelData={this.state.vinDetailModelData}
            dispatch={this.props.dispatch}
          />
          <TboxDetailModal
            changeVisible={() =>
              this.setState({ tboxDetailVisible: false, tboxDetailModelData: {} })
            }
            visible={this.state.tboxDetailVisible}
            detailModelData={this.state.tboxDetailModelData}
            dispatch={this.props.dispatch}
          />
          <SIMDetailModal
            changeVisible={() => this.setState({ simDetailVisible: false, simDetailModelData: {} })}
            visible={this.state.simDetailVisible}
            detailModelData={this.state.simDetailModelData}
            dispatch={this.props.dispatch}
          />
          <IPDADetailModal
            changeVisible={() =>
              this.setState({ ipdaDetailVisible: false, ipdaDetailModelData: {} })
            }
            visible={this.state.ipdaDetailVisible}
            detailModelData={this.state.ipdaDetailModelData}
            dispatch={this.props.dispatch}
          />
        </Card>
      </div>
    );
  }
}
export default connect(mapStateToProps)(OnePcMng);
